<template>
	<view @touchmove.stop.prevent="() => {}" :style="{'--height': $xl.calcUnit(height, 'rpx')}">
		<slot v-if="show" :show="show"></slot>
		<view class="tabbar">
			<template v-for="(item, index) in tabBar.list" :key="index">
				<view class="action" :style="{color: item.pagePath  === $xl.currentPage().substring(1) ? tabBar.selectedColor : tabBar.color}" @click="changeTab(index)">
					<image v-if="item.iconPath && $xl.validate.image(item.iconPath)" :src="item.pagePath === $xl.currentPage().substring(1) ? item.selectedIconPath : item.iconPath" class="tab-img" mode="heightFix"></image>
					<xl-icon v-else class="tab-icon" :name="item.iconPath" :color="item.pagePath  === $xl.currentPage().substring(1) ? tabBar.selectedColor : tabBar.color" size="24"/>
					<view>{{item.text}}</view>
				</view>
				<view v-if="index === midPos && tabBar.midButton" class="action add-action" @click="actionClick">
					<image v-if="tabBar.midButton.iconPath && $xl.validate.image(tabBar.midButton.iconPath)" :src="tabBar.midButton.iconPath" class="action-icon" mode="heightFix"></image>
					<button v-else class="action-icon" :style="{backgroundColor: tabBar.midButton.selectedColor}">
						<xl-icon :name="tabBar.midButton.iconPath" :color="tabBar.midButton.color" size="29"></xl-icon>
					</button>
				</view>
			</template>
		</view>
		<view class="placeholder"></view>	
	</view>
</template>

<script setup>
	import { ref, computed, useSlots, provide, onMounted } from 'vue'
	import propsData from './props.js'
	const props = defineProps(propsData)
	
	// 是否隐藏原生tabbar
	if (uni.$xl.router.isTabbarPage()) uni.hideTabBar();
	
	const tabBar = ref({
		color: '',
		selectedColor: '',
		list: [],
		midButton: null
	})
	
	let midPos = 2
	onMounted(()=>{
		if(uni.$xl.store.app.tabBar){
			tabBar.value = uni.$xl.store.app.tabBar
		}else if(props.api){
			uni.$xl.apis[props.api]().then(res => {
				tabBar.value.color = res.data.color
				tabBar.value.selectedColor = res.data.selectedColor
				tabBar.value.list = []
				for (var i = 0; i < res.data.list.length; i++) {
					tabBar.value.list.push({
						pagePath: res.data.list[i].pagePath ? res.data.list[i].pagePath : props.list[i].pagePath,
						iconPath: res.data.list[i].iconPath ? res.data.list[i].iconPath : props.list[i].iconPath,
						selectedIconPath: res.data.list[i].selectedIconPath ? res.data.list[i].selectedIconPath : props.list[i].selectedIconPath,
						text: res.data.list[i].text ? res.data.list[i].text : props.list[i].text
					})
				}
				if(res.data.midButton){
					tabBar.value.midButton = {
						pagePath: res.data.midButton.pagePath ? res.data.midButton.pagePath : props.midButton.pagePath,
						iconPath: res.data.midButton.iconPath ? res.data.midButton.iconPath : props.midButton.iconPath,
						selectedIconPath: res.data.midButton.selectedIconPath ? res.data.midButton.selectedIconPath : props.midButton.selectedIconPath,
						text: res.data.midButton.text ? res.data.midButton.text : props.midButton.text
					}
				} else {
					tabBar.value.midButton = undefined
				}
				uni.$xl.store.app.tabBar = tabBar.value
			}).catch(err => {
				uni.$xl.toast(err, 2000)
				tabBar.value = {}
			})
		}
		tabBar.value = {
			color: tabBar.value.color ? tabBar.value.color : props.color,
			selectedColor: tabBar.value.selectedColor ? tabBar.value.selectedColor : props.selectedColor,
			list: tabBar.value.list.length > 0 ? tabBar.value.list : props.list,
			midButton: tabBar.value.midButton ? tabBar.value.midButton : props.midButton
		}
		// 计算中间节点
		midPos = tabBar.value.list.length % 2 === 0 ? tabBar.value.list.length/2-1 : tabBar.value.list.length/2
	})
	
	// tab切换
	const changeTab = (index) => {
		// 如果有配置pagePath属性，使用uni.switchTab进行跳转
		if(tabBar.value.list[index].pagePath) {
			uni.$xl.router.push(tabBar.value.list[index].pagePath)
		}
	}
	
	// action事件，支持插槽显示操作
	let show = ref(false)
	const slots = useSlots()
	const emits = defineEmits(['action'])
	function actionClick() {
		// 如果有配置pagePath属性，进行路由跳转
		if(tabBar.value.midButton.pagePath) {
			uni.$xl.router.push(tabBar.value.midButton.pagePath)
		}else if(slots.default){
			// 以前APP不支持插槽显示操作，只能跳转以及事件处理
			show.value = !show.value
		}else {
			emits('action')
		}
	}
	
</script>

<style lang="scss" scoped>
	.tabbar{
		display: flex;
		align-items: center;
		min-height: 100rpx;
		justify-content: space-between;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
    z-index: 990;
		box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.1);
		height: calc(var(--height) + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		background-color: v-bind(backgroundColor);
		color: #666666;
		.action {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		    font-size: 10px;
		    position: relative;
		    flex: 1;
		    line-height: 1;
		    background-color: inherit;
			.tab-icon {
			    width: 50px;
			    position: relative;
			    display: flex;
				justify-content: center;
				align-items: center;
			    height: auto;
			    margin: 0 auto 5px;
			    text-align: center;
			}
			.tab-img {
				width: 50px;
				height: 24px;
				margin: 0 auto 5px;
			}
			&.add-action {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				z-index: 2;
				// &::before {
				// 	content: "";
				// 	position: absolute;
				// 	width: 50px;
				// 	height: 15px;
				// 	bottom: 15px;
				// 	left: 0;
				// 	right: 0;
				// 	margin: auto;
				// 	background-color: inherit;
				// 	z-index: 1;
				// }
				.action-icon{
					box-sizing: border-box;
					width: calc(var(--height) - 4rpx);
					height: calc(var(--height) - 4rpx);
					border-radius: 50%;
					font-size: 25px;
					position: relative;
					top: -12rpx;
					z-index: 2;
          display: flex;
          justify-content: center;
          align-items: center;
				}
				&::after{
					content: "";
					position: absolute;
					left: 0;
					right: 0;
					bottom: -6rpx;
					margin: auto;
					box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.04);
					background-color: inherit;
					z-index: 0;
					width: calc(var(--height) + 30rpx);
					height: calc(var(--height) + 30rpx);
					border-radius: 50%;
				}
			}
		}
	}
	
	.placeholder{
		width: 100%;
		height: var(--height);
	}
</style>
